<template>
	<div class="train">
		<trainHeader name="登录12306账号"></trainHeader>
		<div class="trainLogin">
			<div class="trainLogin_title">极速出票  享更多特权</div>
			<div class="trainLogin_content">
				<div class="trainLogin_msg">
					<span>12306账号</span>
					<div>
						<input type="text" class="trainLogin_input" v-model="userName" placeholder="请输入账号"/>
					</div>
				</div>
				<div class="trainLogin_msg">
					<span>12306密码</span>
					<div>
						<input :type="flag ? 'password' : 'text'" v-model="passWord" class="trainLogin_input" placeholder="请输入密码"/>
						<div class="trainLogin_pic" @click="flag=!flag">
							<img src="http://h5.kpcx179.com/wximages/train/biyan@2x.png" alt="" class="trainLogin_password" v-show="flag"/>
							<img src="http://h5.kpcx179.com/wximages/train/zhengyan@2x.png" alt="" class="trainLogin_text" v-show="!flag"/>
						</div>
					</div>
				</div>
			</div>
			<div class="trainLogin_btn" @click="login">
				登录12306购票
			</div>
		</div>
	</div>
</template>
<style scoped>
	.trainLogin_title {
		font-size: 36px;
		color: #000000;
		text-align: center;
		margin-top: 76px;
	}
	
	.trainLogin_content {
		margin-top: 102px;
		font-size: 32px;
		color: #333333;
	}
	
	.trainLogin_input {
		border:0;
		background: transparent;
		outline:none
	}
	
	.trainLogin_msg {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		height: 100px;
		border-bottom: solid 2px #e9e9e9;
		margin: 0 30px;
	}
	
	.trainLogin_msg > span {
		margin-right: 38px;
	}
	
	.trainLogin_msg > div {
		flex: 1;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		position: relative;
		top: 0;
		left: 0;
	}
	
	.trainLogin_msg > div > .trainLogin_pic {
		position: absolute;
		top: 0;
		right: 30px;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.trainLogin_pic > .trainLogin_password {
		width: 39px;
		height: 14px;
	}
	
	.trainLogin_pic > .trainLogin_text {
		width: 42px;
		height: 28px;
	}
	
	.trainLogin_btn {
		margin: 0 18px;
		height: 98px;
		background-color: #3bc3c2;
		border-radius: 15px;
		font-size: 36px;
		color: #fefefe;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 84px;
	}
</style>
<script>
	import trainHeader from "../../../components/trainHeader";
	import sha from '../../../public/sha521';
	import des from '../../../public/des';
	export default {
		name: "trainLogin",
		data() { //数据
			return {
				flag:true,//密码明文切换变量
				userName:"",//账号
				passWord:"",//密码
				flag:true,//进入页面标识
			}
		},
		mounted() {

		},
		created() {

		},
		
		methods: {
			login(){//登录12306
				var str = "";
				(this.passWord === "") && (str = "请输入密码");
				(this.userName === "") && (str = "请输入账号");
				str ? (this.$toast(str, {
					durtaion: 200,
					location: 'center',
				})) : this.getLogin();
			},
			getLogin(){ //登录
				this.$loading.show();
				var DESkey = 'L82V6ZVD6J';
				var result = sha.hex_sha1(DESkey); //sha1加密
				var key = sha.hexCharCodeToStr(result.substring(0, 16)); //key值
      			var iv = sha.hexCharCodeToStr(result.substring(16, 32)); //向量
      			var userName = des.des(key, this.userName, 1, 1, iv, 1);
			    var passWord = des.des(key, this.passWord, 1, 1, iv, 1);
			    userName = des.stringToHex(userName).substring(2).toLocaleUpperCase();
			    passWord = des.stringToHex(passWord).substring(2).toLocaleUpperCase();
				var param = {
					accountNo: userName,
			        accountPwd: passWord,
					loginModel: '0',
					userID:this.$store.state.common.userinfo.userID || "",
				};
				this.$http.post(this.$baseUrl.baseurl + "tctrain/train/login", param).then((res) => {
					this.$loading.hide();
					if (res.data.Code == "0"){
						//登录成功存参数
						var trainStorage = JSON.parse(JSON.stringify(this.$store.state.train.trainStorage));
						trainStorage.trainLogin = param;
						this.$store.commit('TRAINSTORAGE', trainStorage);
						var trainStore = JSON.parse(JSON.stringify(this.$store.state.train.trainStore));//上页面状态
						trainStore.fillOrder.logInMessage = res.data.Result;//存登录信息
						trainStore.trainPassenger && (trainStore.trainPassenger.isLogin = true);
						this.$store.commit('TRAINSTORE', trainStore);
						this.$toast("登录成功", {
							durtaion: 200,
							location: 'center',
						});
						var timer = setTimeout(function(){
							this.$router.go(-1);
							clearTimeout(timer);
						}.bind(this),250);
					} else {
						this.$toast(res.data.msg, {
							durtaion: 200,
							location: 'center',
						});
					}
				}).catch((err) => {
					this.$loading.hide();
					console.log(err);
				});
			}
		},
		components: {
			trainHeader
		},
//		beforeRouteEnter(to,from,next){//进入
//			this.$root.eventHub.$emit('inspectCancelPay');
//			this.$root.eventHub.$off('inspectCancelPay');
//			this.$root.eventHub.$on('inspectCancelPay', () => {});
//		},
//		beforeRouteLeave(to,from,next){//离开
//			
//		},
//		beforeRouteUpdate(to,from,next){//渲染
//			
//		}
	};
</script>